<template>
	<view>
		<view class="search_top">
			<u-search
			class="search"
			v-model="searchContent"
			:placeholder="test"
			:clearabled="true"
			:focus="true"
			:height="30"
			shape="square"
			bgColor="white"
			:animation="true"
			@custom="search()"></u-search>
		</view>

		<h3 style="padding:20rpx;display: flex;justify-content: space-between;align-items: center;">
			<text>历史搜索</text>
			<u-icon name="trash" size="50rpx" @click="clearAllSearchHistry()"></u-icon>
		</h3>
		<view class="search_historys">

			<view v-for="(searchHistory,index) in searchHistorys" class="search_history">
				<text @click="searchThisSearchHistry(searchHistory)">{{searchHistory}}</text>
				<u-icon name="close"  @click="clearThisSearchHistry(index)" style="background-color: white;border-radius: 50rpx;"></u-icon>
			</view>
		</view>
		<h3 style="padding:20rpx; display: flex;justify-content: space-between;align-items: center;">
			<text>搜索热词</text>
			<u-icon name="reload" size="50rpx" @click="refreshSearchHotWord()"></u-icon>
		</h3>
		<view class="search_hotWords">
		  <view v-for="(searchHotWord, index) in searchHotWords" 
		        :class="['search_hotWord', index === 0 ? 'top1' : index === 1 ? 'top2' : index === 2 ? 'top3' : '']" 
		        @click="searchThisHotWord(searchHotWord)">
		    <text class="rank">{{ index + 1 }}</text>
		    <u-image src="/static/img/hot.png" height="50rpx" width="50rpx" style="display: inline-block;"></u-image>
		    <text>{{ searchHotWord }}</text>
		  </view>
		</view>

	</view>
</template>

<script>
import search from '../../uni_modules/uview-ui/libs/config/props/search';

	export default {
		data() {
			return {
				searchContent:'',
				searchHistorys:['java'],
				searchHotWords:['java','springboot','CSDN','python','c#','计算机组成原理','操作系统','计算机网络','C语言从入门到入土','如何精通Java','go语言发展历史','好看的24种CSS渐变效果汇总'],
				test:'如何让霸道女总裁爱上我',
				currentIndex: 0,
			}
		},
		methods: {
			intiPage(){
				this.getSearchHistorys();
			},
			getSearchHistorys(){
				this.searchHistorys.splice(0,this.searchHistorys.length);
				const arr=uni.getStorageSync("searchHistorys");
				for(let i=0;i<arr.length&&i<=10;i++){
					this.searchHistorys.push(arr[i]);
				}
			},
			search(){
				//console.log(this.searchContent);
				const index=this.searchHistorys.indexOf(this.searchContent);
				if(index>=0){
					this.searchHistorys.splice(index,1);
				}
				this.searchHistorys.unshift(this.searchContent);
				uni.setStorageSync("searchHistorys",this.searchHistorys);
				this.getSearchHistorys();
				uni.navigateTo({
					url:'/pages/searchResult/searchResult?searchContent='+encodeURIComponent(this.searchContent)
				});
			},
			updatePlaceholder() {
			    // 更新 test 的值为 searchHotWords 中的当前索引
			    this.test = this.searchHotWords[this.currentIndex];
			    // 更新索引，循环使用
			    this.currentIndex = (this.currentIndex + 1) % this.searchHotWords.length;
			},
			clearAllSearchHistry(){
				uni.showModal({
					title:'确认',
					content:'此操作会删除所有的历史记录',
					success: (res) => {
						if (res.confirm) {
							console.log('用户点击了确认');
							uni.setStorageSync("searchHistorys",'');
							this.getSearchHistorys();
						} else if (res.cancel) {
						    console.log('用户点击了取消');
						    // 执行取消后的操作
						}
					}
				})

			},
			searchThisSearchHistry(searchHistory){
				this.searchContent=searchHistory;
				this.search();
			},
			clearThisSearchHistry(index){
				const arr=uni.getStorageSync("searchHistorys");
				arr.splice(index,1);
				uni.setStorageSync("searchHistorys",arr);
				this.getSearchHistorys();
			},
			refreshSearchHotWord(){

			},
			searchThisHotWord(searchHotWord){
				this.searchContent=searchHotWord;
				this.search();
			}

		},
		mounted() {
		    // 初始设置 placeholder
		    this.updatePlaceholder();
		    // 更新 placeholder
		    this.interval = setInterval(this.updatePlaceholder, 5000);
			this.intiPage();
		  },
		  beforeDestroy() {
		    // 组件销毁前清除定时器
		    clearInterval(this.interval);
		  }
	}
</script>

<style>
	.search_top{
		width: 100%;
		background: linear-gradient(to right, #9fe1fa, #f4edc9);
	}
	.search{
		padding-top: 30rpx;
		padding-left: 20rpx;
		padding-right: 20rpx;
		padding-bottom: 20rpx;
	}
	.search_historys{
		padding-left: 30rpx;
	}
	.search_history{
		display: inline-flex;
		margin: 10rpx;
		padding: 10rpx;
		border-radius: 50rpx;
		background-color: #ebebeb;
	}
	.search_hotWords {
	    padding: 20rpx;
	    margin: 10rpx;
	    display: flex;
	    flex-direction: column;
	    gap: 10rpx;
	    background-color: #f5f7fa;
	    border-radius: 16rpx;
	    box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.1);
	}
	
	.search_hotWord {
	    padding: 10rpx 20rpx;
	    margin: 5rpx 0;
	    background-color: #ffffff;
	    border: 1rpx solid #9fe1fa;
	    border-radius: 12rpx;
	    display: flex;
	    align-items: center;
	    gap: 20rpx;
	    box-shadow: 0 2rpx 5rpx rgba(0, 0, 0, 0.1);
	    transition: all 0.3s ease;
	    position: relative;
	}
	
	.search_hotWord:hover {
	    background-color: #e3f7fc;
	    transform: translateY(-2rpx);
	    box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.15);
	}
	
	.search_hotWord u-image {
	    border-radius: 50%;
	    border: 1rpx solid #9fe1fa;
	}
	
	.search_hotWord text {
	    font-size: 28rpx;
	    color: #333333;
	}
	
	.search_hotWord .rank {
		width: 30rpx;
	    font-size: 32rpx;
	    font-weight: bold;
	    color: #ff5722;
	    
	}
	
	.search_hotWord.top1 {
	    background-color: #ffd700;
	}
	
	.search_hotWord.top2 {
	    background-color: #c0c0c0;
	}
	
	.search_hotWord.top3 {
	    background-color: #cd7f32;
	}

</style>
